<template>
  <div class="hello">
    <div>Button 2</div>
    <div class="color">
    </div>
    <input type="file" name="" @change="show($event)">
    <div id="container" style="height:400px; border:1px solid #000"></div>
  </div>
</template>

<script>

var THREE = require('three/build/three.js')
window.THREE = THREE
var OrbitControls = require('three-orbit-controls')(THREE)
var TrackballControls = require('three-trackballcontrols')
var textureLoader = new THREE.TextureLoader();

var OBJLoader = require('three-obj-loader');
OBJLoader(THREE);
var FBXLoader = require('three-fbx-loader');



// var loader = new THREE.ObjectLoader();

// var loader = require('@alextoudic/obj-mtl-loader')
// console.log(loader)
//
// var THREE = require('three/build/three.js');
// var Three = THREE
// var OrbitControls = require('three-orbit-controls')
// var TrackballControls = require('three-trackballcontrols');

// import { TrackballControls } from 'three/examples/js/controls/TrackballControls';
// import * as Three from 'three.js'
// var OrbitControls = require("three/examples/js/controls/OrbitControls")
export default {
  name: 'HelloWorld',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      thumb: require( '../assets/template.jpg' ),
      texture: null,
      object: null
    }
  },
  components: {
    
  },
  created(){
  },
  methods: {
    show:function(e) {
      let file = e.target.files.length >0?e.target.files[0]:'';
      this.thumb = (this.getObjectURL(file))
      this.getTexture();
      console.log(this.object);
      let that = this
      this.object.traverse( function ( child ) {
            if ( child.isMesh && child.name=='罐身') {
              child.material.map = that.texture;
              child.material.blending = THREE.AdditiveBlending;
              child.material.needsUpdate  = true;

            }
      });
      this.object.updateMatrix();
    },
    init: function() {
        var container = document.getElementById('container');

				this.renderer = new THREE.WebGLRenderer();
				this.renderer.setPixelRatio( window.devicePixelRatio );
				this.renderer.setSize( container.offsetWidth, container.offsetHeight );
				container.appendChild( this.renderer.domElement );
				this.scene = new THREE.Scene();
				this.scene.background = new THREE.Color( 0xFF676262 );
				this.camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 1000 );
				this.camera.position.set( 0, 0, 500 );
				this.controls = new TrackballControls( this.camera, this.renderer.domElement );
				this.controls.minDistance = 200;
        this.controls.maxDistance = 500;
				this.controls.enableZoom = false;
				this.scene.add( new THREE.AmbientLight( 0x222222 ) );
				var light = new THREE.PointLight( 0xffffff );
				light.position.set( 0, 100, 0 );
				this.scene.add( light );
        var light = new THREE.PointLight( 0xffffff );
				light.position.set( 0, -100, 0 );
				this.scene.add( light );
        var light = new THREE.AmbientLight( 0xffffff , 0.5);
        this.scene.add( light );

        this.loadFbx();
       
    },
    animate: function() {
      requestAnimationFrame( this.animate );
			this.controls.update();
      this.renderer.clear();
			this.renderer.render( this.scene, this.camera );

    },
    getTexture: function(){
      this.texture = textureLoader.load( this.thumb );
      this.texture.wrapS = THREE.RepeatWrapping;
      this.texture.wrapT = THREE.RepeatWrapping;
      this.texture.needsUpdate = true;
    },
    loadFbx: function(){
      let that = this
      let loader = new FBXLoader()
      this.getTexture()
      loader.load('bentley_realiboxtest/Bentley_Continental_GT3.fbx',function ( object ) {
        console.log(object)
          // object.position.x = 0;
          // object.position.y = 0;
          // object.position.z = 0;
          // object.traverse( function ( child ) {
          //   if ( child.isMesh && child.name=='罐身') {
          //     child.material.map = that.texture;
          //     child.material.blending = THREE.AdditiveBlending;
          //     child.material.needsUpdate  = true;

          //   }
          // });
          that.object = object;
          that.scene.add( object );
      },
      // called when loading is in progresses
      function ( xhr ) {

          console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

      },
      // called when loading has errors
      function ( error ) {

          console.log(error);
          console.log( 'An error happened' );

      });
    },
    loadObj: function(){
      let that = this
      let loader = new THREE.OBJLoader;
      this.getTexture();
      loader.load('3d/18.obj',function ( object ) {
          object.position.x = 0;
          object.position.y = 0;
          object.position.z = 0;
          object.traverse( function ( child ) {
            if ( child.isMesh && child.name=='罐身') {
              child.material.map = that.texture;
              child.material.blending = THREE.AdditiveBlending;
              child.material.needsUpdate  = true;

            }
          });
          that.object = object;
          that.scene.add( object );
      },
      // called when loading is in progresses
      function ( xhr ) {

          console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

      },
      // called when loading has errors
      function ( error ) {

          console.log( 'An error happened' );

      });
    },
    getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
          url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
  },
  mounted() {
      this.init();
      this.animate()
  }
};
</script>
<style type="text/css">
  
</style>
<!-- Add "scoped" attribute to limit CSS to this component only 

 // var geometry=new THREE.CylinderGeometry(45,45,90,160);
        // // var material = new THREE.MeshBasicMaterial( { color: 0xFF080707, emissive:0xFF080707 } );
        //
        // var mapBg = textureLoader.load( logo );
        // var material = new THREE.MeshBasicMaterial( { map: mapBg } );
        // var mesh = new THREE.Mesh( geometry, material );
        // mesh.position.x = 0;
        // mesh.position.y = 0;
        // mesh.position.z = 0;
        // mesh.updateMatrix();
        // mesh.matrixAutoUpdate = false;
        // this.scene.add( mesh );

        // var geometry=new THREE.CylinderGeometry(70,80,20,160);
        // var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFFFF, emissive:0xFFFFFFFF } );
        // var mesh = new THREE.Mesh( geometry, material );
        // mesh.position.x = 0;
        // mesh.position.y = 100;
        // mesh.position.z = 0;
        // mesh.updateMatrix();
        // mesh.matrixAutoUpdate = false;
        // this.scene.add( mesh );
        // //
        // var geometry=new THREE.CylinderGeometry(80,70,20,160);
        // var material = new THREE.MeshBasicMaterial( { color: 0xFFFFFFFF, emissive:0xFFFFFFFF } );
        // var mesh = new THREE.Mesh( geometry, material );
        // mesh.position.x = 0;
        // mesh.position.y = -100;
        // mesh.position.z = 0;
        // mesh.updateMatrix();
        // mesh.matrixAutoUpdate = false;
        // this.scene.add( mesh );
        //



-->
